<template>
	<div class="app-container">
		<div class="downStream2">
			<div class="down-top">
				<el-steps :active="2" finish-status="end" process-status='curt' class="nextnav"  simple>
				  <el-step title="导入文件" icon="iconfont icon-1" ></el-step>
				  <el-step title="保单校验" icon="iconfont icon-2"></el-step>
				  <el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
			</div>
			<div class="down-lot">
				<el-button size='mini' @click='openDialog'>批量修改</el-button>
				<el-dialog title="批量修改" :visible.sync="dialogShow" width='500px' :close-on-click-modal='false' center>
				  <div class="uploadBox">
				  	<div class="box1">
				  		<span>第一步：</span>
				  		<span>导出数据报表，根据需求进行修改；</span>
				  		<el-button size='mini' @click='exportSettle' :loading="daoloading">导出</el-button>
				  	</div>
				  	<div class="box2">
				  		<span>第二步：</span>
				  		<span>导出修改后的报表；</span>
				  		<el-upload
						  class="upload-demo upload1"
						  :action="upurl"
						  :headers="headers"
						  :on-remove="handleRemove"
						  :before-remove="beforeRemove"
						  multiple
						  :limit="1"
						  accept="excel/xls,excel/xlsx"
						  :on-success='handleSuccess'
						  :on-error='errorUP'
						  :before-upload="beforeAvatarUpload"
						  :on-exceed="handleExceed"
						  :file-list="fileList">
						  <el-button size="mini"><i class='el-icon-upload'></i> 点击上传</el-button>
						  <div slot="tip" class="el-upload__tip">支持格式：xlsx、xls</div>
						</el-upload>
						<span class="upSapn1">文件上传成功后，所上传的结算保单默认为允许结算，</span>
						<span class="upSapn1">其他设置为暂不结算，可以根据自己的需要再做修改！</span>
				  	</div>
				  	<div class="box3">
				  		<span>第三步：</span>
				  		
				  		<span>批量修改完成；</span>
				  	</div>
				  </div>
				  <div class="box4">
				  		<el-button size='mini' type='primary' class='upBtn' @click='uploadBtn' :loading='okloading'>确定</el-button>
				  	</div>
				</el-dialog>
			</div>
			<div class="down-list">
				<div class="list-tab">
					<div class="tab" v-bind:class="{'now': now == 1}" @click='changeTab(1)'>全部<span>（{{count}}条）</span></div>
					<div class="tab" v-bind:class="{'now': now == 2}" @click='changeTab(2)'>可以结算保单<span>（{{salesmanCount}}条）</span></div>
					<div class="tab" v-bind:class="{'now': now == 3}" @click='changeTab(3)'>暂不结算保单<span>（{{notSalesmanCount}}条）</span></div>
				</div>
				<div class="list-all2" clearfix>
					<div class="all-data2">
						<span>政策金额：<span>{{premium | numFilter}}</span>元，实结合计：<span v-bind:class="{'data-red': premium != actionPremium}">{{actionPremium | numFilter
						}}</span>元</span>&nbsp;
					</div>
				</div>
				<div class="list-table">
					<el-table :data="tableData" style="width: 100%" :stripe='true' 
					@expand-change='toggleRowExpansion' v-loading='loading'
					 element-loading-background="rgba(255, 255, 255, 0.3)">
						<el-table-column type="expand">
							 <template slot-scope="props">
								  <div v-loading='expandLoading' v-if='props.row.expandData' >
									     <div class="item-content clearfix" >
						        	<div class="lf">
						        		<p class="title1">保单匹配政策</p>
						        		<p><span class="firstSpan">政策批次：</span>
						        			<span class='lineS' v-if='props.row.expandData.policys && props.row.expandData.policys.batchName' @click='toD(props.row.expandData.policys.batchId)'>{{props.row.expandData.policys.batchName}} <i class="iconfont icon-zhuanfa"></i></span>
						        			
											<el-tooltip v-else-if="props.row.insuranceId && props.row.staffId" placement="bottom-start" effect="light">
												<div slot="content">查看下游更多政策</div>
												<router-link   class="all alls" tag="a" target="_blank" :to="{ name: 'policydown', query: { insuranceId: props.row.insuranceId, staffId:props.row.staffId , time:new Date().getTime()}}">未匹配到政策
												</router-link>
											</el-tooltip>
											
							
											
											<span v-else>-</span>
												<!-- <router-link  v-else class="all alls" tag="a" target="_blank" :to="{ name: 'policyup', query: { insuranceId: expandData.policys.InsuranceId, staffId:expandData.policys.StaffId , time:new Date().getTime()}}">未匹配到政策
												</router-link> -->
						        		</p>
						        		<p><span class="firstSpan">工&emsp;&emsp;号：</span>
						        			<span v-if='props.row.expandData.policys && props.row.expandData.policys.staffs.length != 0'>
						        			<span v-for='item in props.row.expandData.policys.staffs'>{{item.staffAccount}}({{item.describe}})</span></span>
						        			<span v-else-if="props.row.staffAccount">{{props.row.staffAccount}}({{props.row.describe}})</span>
											<span v-else>-</span>
						        		</p>
						        		<div class="divP"><span class="firstSpan">有&ensp;效&ensp;期：</span>
						        			<span v-if='!props.row.expandData.policys || (!props.row.expandData.policys.effectiveDate &&  !props.row.expandData.policys.expiryDate)'>-</span>
						        			<div class="setWd" v-else>
							        		<span v-if='props.row.expandData.policys && props.row.expandData.policys.effectiveDate'>{{props.row.expandData.policys.effectiveDate | TenCon}}</span>
							        		<span v-if='!props.row.expandData.policys || !props.row.expandData.policys.effectiveDate'>-</span>
							        		 到 
							        		<span v-if='props.row.expandData.policys && props.row.expandData.policys.expiryDate'>{{props.row.expandData.policys.expiryDate | TenCon}}</span>
							        		<span v-if='props.row.expandData.policys && !props.row.expandData.policys.expiryDate'>不限</span>
							        		<span v-if='!props.row.expandData.policys'>-</span>
							        		</div>
						        		</div>
						        		<div class="divP"><span class="firstSpan">匹配政策：</span>
						        		<div class='setWd'>
											<span  v-if='props.row.expandData.policys && props.row.expandData.policys.remark' class="lineS" @click='toR(props.row.expandData.policys.batchId,props.row.expandData.policys.policyId)'>{{props.row.expandData.policys.serialNumber&&props.row.expandData.policys.serialNumber>10?props.row.expandData.policys.serialNumber+'&nbsp;&nbsp;':'0'+props.row.expandData.policys.serialNumber+'&nbsp;&nbsp;'}}{{props.row.expandData.policys.remark}} <i class="iconfont icon-zhuanfa"></i></span>
											<span v-else>-</span>
										</div>						        		
						        		</div>
						        		<div class="divP"><span class="firstSpan">附加奖励：</span>
						        			<div class="setWd">
							        		<span  v-if='props.row.expandData.policys && props.row.expandData.policys.policyRewards.length != 0'>
							        		<span v-for='item in props.row.expandData.policys.policyRewards'
							        		 class='lineS' @click='toA(item.policyBatchId)'><span class="noDou">,</span>{{item.policyBatchName}} <i class="iconfont icon-zhuanfa"></i></span>
							        		</span>
						        			<span v-else>-</span>
						        			</div>
						        		</div>
						        	</div>
						        	<div class="md" >
						        		<p class="title1">政策预估费用</p>
						        		<p><span class="firstSpan">保单手续费比例：</span><span v-if="props.row.expandData.chargeRatio=='-'&&props.row.expandData.chargeBrokerageRation=='-'&&props.row.expandData.chargeRewardRatio=='-'">-</span><span v-else>
											<el-tooltip placement="top" effect="light">
												 <div slot="content">
													 <div>佣金：{{props.row.expandData.chargeBrokerageRation | percentFilter}}</div>
													 <div>奖励：{{props.row.expandData.chargeRewardRatio | percentFilter}}</div></div>
												 <span style="color:#151515;cursor:pointer;display:inline;">{{props.row.expandData.chargeRatio | percentFilter}}</span>
											</el-tooltip>
										</span>
										</p>
						        		<p><span class="firstSpan">保单手续费：</span><span v-if="props.row.expandData.charge == '-'">-</span><span v-else>{{props.row.expandData.charge | numFilter}} 元</span></p>
						        		<p><span class="firstSpan">车船税佣金比例：</span><span>{{props.row.expandData.vehicleAndVesselTaxRatio | percentFilter}}</span></p>
						        		<p><span class="firstSpan">车船税佣金：</span><span v-if="props.row.expandData.vehicleAndVesselTax == '-'">-</span><span v-else>{{props.row.expandData.vehicleAndVesselTax | numFilter}} 元</span></p>
						        		<p><span class="firstSpan">附加奖励比例：</span><span>{{props.row.expandData.additionalRewardRatio | percentFilter}}</span></p>
						        		<p><span class="firstSpan">附加奖励金额：</span><span v-if="props.row.expandData.additionalReward == '-'">-</span><span v-else>{{props.row.expandData.additionalReward | numFilter}} 元</span></p>
						        	</div>
						        	<div class="rh">
						        		<p class="title1">下游实结费用</p>
						        		<p><span class="firstSpan">保单手续费比例：</span><span>{{props.row.expandData.actionChargeRatio | percentFilter}}</span></p>
						        		<p><span class="firstSpan">保单手续费：</span><span v-if="props.row.expandData.actionCharge == '-'">-</span><span v-else>{{props.row.expandData.actionCharge | numFilter}} 元</span></p>
						        		<p><span class="firstSpan">车船税佣金比例：</span><span>{{props.row.expandData.actionVehicleAndVesselTaxRatio | percentFilter}}</span></p>
						        		<p><span class="firstSpan">车船税佣金：</span><span v-if="props.row.expandData.actionVehicleAndVesselTax == '-'">-</span><span v-else>{{props.row.expandData.actionVehicleAndVesselTax | numFilter}} 元</span></p>
						        		<p><span class="firstSpan">附加奖励比例：</span><span>{{props.row.expandData.actionAdditionalRewardRatio | percentFilter}}</span></p>
						        		<p><span class="firstSpan">附加奖励金额：</span><span v-if="props.row.expandData.actionAdditionalReward == '-'">-</span><span v-else>{{props.row.expandData.actionAdditionalReward | numFilter}} 元</span></p>
						        	</div>
								




									
						        </div >

								<div  class="item-content clearfix" style="padding:10px 0;">
									<a class="links" style="text-decoration: underline;" @click="getMore(props.row)">查看更多...</a>
								</div>
								<div  class="item-content clearfix" v-if="props.row.isShowM">
										
									<div style="overflow: hidden;">
										<!-- {{baodanDetaill}} -->


										<div class="lf">
						        		<p class="title1">保单信息</p>
						        		<p><span class="firstSpan">签单日期：</span>
						        			
							
											<span v-if="props.row.cheMsg.signDate">{{props.row.cheMsg.signDate}}</span>
											<span v-else>-</span>
											
						        		</p>
						        		<p><span class="firstSpan">起保日期：</span>
											<span v-if="props.row.cheMsg.beginDate ">{{props.row.cheMsg.beginDate }}</span>
											<span v-else>-</span>
						        		</p>
						        		<div class="divP"><span class="firstSpan">交商同保：</span>
						        			<span v-if="props.row.cheMsg.mutualInsurance  ">{{props.row.cheMsg.mutualInsurance  }}</span>
											<span v-else>-</span>
						        		</div>
						        		
						        	</div>
						        	<div class="md" style="border:none;">
						        		<p class="title1">&nbsp;</p>
						        		<p><span class="firstSpan" style="width:95px;">核保日期：</span>
											<span v-if="props.row.cheMsg.confirmDate   ">{{props.row.cheMsg.confirmDate   }}</span>
											<span v-else>-</span>
										</p>
						        		<p><span class="firstSpan"  style="width:95px;">到期日期：</span> 
											<span v-if="props.row.cheMsg.expirationDate    ">{{props.row.cheMsg.expirationDate    }}</span>
											<span v-else>-</span>
										</p>
						        		<p><span class="firstSpan"  style="width:95px;">上年出险次数：</span>
											<span v-if="props.row.cheMsg.dangerTimes     ">{{props.row.cheMsg.dangerTimes     }}</span>
											<span v-else>-</span>
										</p>
						        		
						        	</div>
						        	<div class="rh rh2">
						        		<p class="title1">&nbsp;</p>
						        		<p><span class="firstSpan">支付日期：</span>
											<span v-if="props.row.cheMsg.paymentDate     ">{{props.row.cheMsg.paymentDate     }}</span>
											<span v-else>-</span>
										</p>
						        		<p><span class="firstSpan">业务类型：</span>
											<span v-if="props.row.cheMsg.businessType     ">{{props.row.cheMsg.businessType     }}</span>
											<span v-else>-</span>
										</p>
						        		<p><span class="firstSpan">上年违章次数：</span>
											<span v-if="props.row.cheMsg.peccancyTimes     ">{{props.row.cheMsg.peccancyTimes     }}</span>
											<span v-else>-</span>
										</p>
						        		
						        	</div>


									
									</div>
									<div style="overflow: hidden;">
										<!-- {{baodanDetaill}} -->


										<div class="lf">
						        		<p class="title1">车辆信息</p>
						        		<p><span class="firstSpan ">车辆种类：</span>
											<span v-if="props.row.cheMsg.vehicleType      ">{{props.row.cheMsg.vehicleType      }}</span>
											<span v-else>-</span>
						        		</p>
						        		<p><span class="firstSpan ">号牌底色：</span>
						        			<span v-if="props.row.cheMsg.plateColor      ">{{props.row.cheMsg.plateColor      }}</span>
											<span v-else>-</span>
						        		</p>
						        		<p><span class="firstSpan ">发动机号：</span>
						        			<span v-if="props.row.cheMsg.engineNumber      ">{{props.row.cheMsg.engineNumber      }}</span>
											<span v-else>-</span>
						        		</p>
										<p><span class="firstSpan ">座&emsp;&emsp;位：</span>
						        			<span v-if="props.row.cheMsg.seatCount      ">{{props.row.cheMsg.seatCount      }}</span>
											<span v-else>-</span>
						        		</p>
										<p><span class="firstSpan ">是否新车：</span>
						        			<span v-if="props.row.cheMsg.isNew      ">{{props.row.cheMsg.isNew      }}</span>
											<span v-else>-</span>
						        		</p>
						        		
						        	</div>
						        	<div class="md" style="border:none;">
						        		<p class="title1">&nbsp;</p>
						        		<p><span class="firstSpan fi">采&ensp;购&ensp;价：</span>
											<span v-if="props.row.cheMsg.purchasePrice      ">{{props.row.cheMsg.purchasePrice | numFilter      }}</span>
											<span v-else>-</span>
						        		</p>
						        		<p><span class="firstSpan fi">核载质量：</span>
						        			<span v-if="props.row.cheMsg.loadQuality      ">{{props.row.cheMsg.loadQuality      }}</span>
											<span v-else>-</span>
						        		</p>
						        		<p><span class="firstSpan fi">整备质量：</span>
						        			<span v-if="props.row.cheMsg.curbQuality      ">{{props.row.cheMsg.curbQuality      }}</span>
											<span v-else>-</span>
						        		</p>
										<p><span class="firstSpan fi">功&emsp;&emsp;率：</span>
						        			<span v-if="props.row.cheMsg.power      ">{{props.row.cheMsg.power      }}</span>
											<span v-else>-</span>
						        		</p>
										<p><span class="firstSpan fi">排&emsp;&emsp;量：</span>
						        			<span v-if="props.row.cheMsg.displacement      ">{{props.row.cheMsg.displacement      }}</span>
											<span v-else>-</span>
						        		</p>
						        		
						        	</div>
						        	<div class="rh rh2">
						        		<p class="title1">&nbsp;</p>
						        			<p><span class="firstSpan">厂牌型号：</span>
											<span  class="changpai" v-if="props.row.cheMsg.brandModel      " :title="props.row.cheMsg.brandModel">{{props.row.cheMsg.brandModel      }}</span>
											<span v-else>-</span>
						        		</p>
						        		<p><span class="firstSpan">是否过户车：</span>
						        			<span v-if="props.row.cheMsg.isTransfer      ">{{props.row.cheMsg.isTransfer      }}</span>
											<span v-else>-</span>
						        		</p>
						        		<p><span class="firstSpan">所属性质：</span>
						        			<span v-if="props.row.cheMsg.belongNature      ">{{props.row.cheMsg.belongNature      }}</span>
											<span v-else>-</span>
						        		</p>
										<p><span class="firstSpan">使用性质：</span>
						        			<span v-if="props.row.cheMsg.useNature      ">{{props.row.cheMsg.useNature      }}</span>
											<span v-else>-</span>
						        		</p>
										<p><span class="firstSpan">初登日期：</span>
						        			<span v-if="props.row.cheMsg.initialDate      ">{{props.row.cheMsg.initialDate   | times   }}</span>
											<span v-else>-</span>
						        		</p>
						        		
						        	</div>


									
									</div>

									
								</div>
								  </div>
						     
						        <div class="item-content clearfix" v-else style='text-align:center'>加载中...</div>
						      </template>
						</el-table-column>
						 <el-table-column  width='60'>
						 	<template slot-scope='scope'>
						 		<span v-if="scope.row.insuranceType == 1" class="edspan1">商</span>
						 		<span v-if="scope.row.insuranceType == 2" class="edspan2">交</span>
						 	</template>
						 </el-table-column>
						 <el-table-column  label='保单信息'>
						 	<template slot-scope='scope'>
						 		<p class="info-p1 clearfix">
							 		<span class="lineG" @click='toG(scope.row.guaranteeSlipId)' v-if='scope.row.guaranteeSlipNumber' :title='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
							 		<span v-if='!scope.row.guaranteeSlipNumber'>-</span>
							 		<el-tooltip v-if='scope.row.insuranceName' placement="bottom-start" effect="light">
										<div slot="content">{{scope.row.staffAccount}}({{scope.row.describe}})</div>
										<span  style="vertical-align:top;">{{scope.row.insuranceName}}</span>
									</el-tooltip>
							 		<span v-if='!scope.row.insuranceName'>-</span>
						 		</p>
						 		<p class="info-p2">
							 		<span v-if='scope.row.plateNumber'>{{scope.row.plateNumber}}</span>
							 		<span v-if='!scope.row.plateNumber'>-</span>
									 <template v-if="scope.row.customerName!== null">
										 <el-tooltip v-if='scope.row.customerName.length >6' class="item" effect="dark" :content="scope.row.customerName" placement="bottom">
										<span style="cursor: pointer;">{{scope.row.customerName | sixCon}}</span>
										</el-tooltip>
										<span v-if='scope.row.customerName.length <6'>{{scope.row.customerName | sixCon}}</span>
									 </template>
									 
							 		<span v-if='!scope.row.customerName'>-</span>
						 		</p>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="业务归属" width='180'>
						 	<template slot-scope='scope'>
						 		<p class="info-p1" v-if='scope.row.salesman'>{{scope.row.salesman}}</p>
						 		<p class="info-p1" v-if='!scope.row.salesman'>-</p>
						 		<el-tooltip placement="bottom-start" effect="light">
							 		<div slot="content">{{scope.row.organizationUnitName}}</div>
							 		<p class="info-p2" v-if='scope.row.organizationUnitName'>{{scope.row.organizationUnitName | lastname}}</p>
						 		</el-tooltip>
						 		<p class="info-p2" v-if='!scope.row.organizationUnitName'>-</p>
						 	</template>
						 </el-table-column>
						 <el-table-column  :render-header='fee' width='150' align='right'>
						 	<template slot-scope='scope'>
						 		<p class="info-p3">
							 		<span v-if='scope.row.gVehicleAndVesselTax != 0'>{{scope.row.gVehicleAndVesselTax | numFilter}}</span>
							 		<span v-if='scope.row.gVehicleAndVesselTax == 0'>0.00</span>
							 		<span v-if='scope.row.gVehicleAndVesselTax == null'>-</span>
							 		<span v-if='scope.row.totalPremium != 0'>&nbsp;/&nbsp;{{scope.row.totalPremium | numFilter}}</span>
							 		<span v-if='scope.row.totalPremium == 0'>&nbsp;/&nbsp;0.00</span>
							 		<span v-if='scope.row.totalPremium == null'>&nbsp;/&nbsp;-</span>
						 		</p>
						 		<p class="info-p1" v-if='scope.row.totalNetPremium != 0'>{{scope.row.totalNetPremium | numFilter}}</p>
						 		<p class="info-p1" v-if='scope.row.totalNetPremium == 0'>0.00</p>
						 		<p class="info-p1" v-if='scope.row.totalNetPremium == null'>-</p>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="政策费用" width='120' align='right'>
						 	<template slot-scope='scope'>
						 		<span class='setFont' v-if='scope.row.total != 0'>{{scope.row.total | numFilter}}</span>
						 		<span class='setFont' v-if='scope.row.total == 0'>0.00</span>
						 		<span class='setFont' v-if='scope.row.total == null'>-</span>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="实结费用" width='120' align='right'>
						 	<template slot-scope='scope'>
						 		<span class='setFont' v-if='scope.row.actionTotal != 0' v-bind:class="{'setR':scope.row.actionTotal != scope.row.total}">{{scope.row.actionTotal | numFilter}}</span>
						 		<span class='setFont' v-if='scope.row.actionTotal == 0' v-bind:class="{'setR':scope.row.actionTotal != scope.row.total}">0.00</span>
						 		<span class='setFont' v-if='scope.row.actionTotal == null'>-</span>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="是否结算" width='120' align='right'>
						 	<template slot-scope='scope'>
						 		<span v-if='scope.row.lowerSettleState == 1' style="color:#CF1322;">已结算</span>
						 		<el-tooltip v-else :content="scope.row.isSettlement? '可以结算':'暂不结算'" placement="top">
							 		<el-switch 
									  v-model="scope.row.isSettlement"
									  active-color="#87D068"
									  inactive-color="#CCCCCC" 
    								  @change='switchtoggle(scope.row.id)'
									  >
									</el-switch>
								</el-tooltip>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="操作" width='80' align='right'>
						 	<template slot-scope='scope'>
								<a class="remark" v-if='scope.row.lowerSettleState == 1' ></a>
						 		<a class="remark" v-else @click='toEdit(scope.row)'>编辑</a>
						 	</template>
						 </el-table-column>
					</el-table>
				</div>
				<div class="list-page">
					<el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next,jumper" :total="pagetotal"></el-pagination>
				</div>
			</div>
			<div class="down-btn">
				<el-button size='small' class='wd100' @click='toupstep()'>上一步</el-button>
				<el-button size='small' type='primary' class='wd100' @click='tosettle()' v-if='btnShow'>结算</el-button>
				<el-dialog title="确认" :visible.sync="dialogVisible" width='500px' :close-on-click-modal='false' v-loading='dialogLoading'>
				  <p style="text-align: left;margin-top:0;">请确认以下结算信息是否正确：</p>
				  <table class="settletable" border="1" cellpadding="6" cellspacing="0">
				  	<tr>
				  		<td width="25%"></td>
				  		<td width="25%">条数</td>
				  		<td width="25%">政策金额</td>
				  		<td width="25%">实结金额</td>
				  	</tr>
				  	<tr>
				  		<td style="text-align:left;">共搜索保单</td>
				  		<td>{{settleTableData.totalCount}}</td>
				  		<td>{{settleTableData.exportTotalCost | numFilter}}</td>
				  		<td>{{settleTableData.exportATotalCost | numFilter}}</td>
				  	</tr>
				  	<tr class="setB">
				  		<td style="text-align:left;">本次结算保单</td>
				  		<td>{{settleTableData.salesmanCount}}</td>
				  		<td>{{settleTableData.salesmanTotalCost | numFilter}}</td>
				  		<td>{{settleTableData.salesmanATotalCost | numFilter}}</td>
				  	</tr>
				  	<tr>
				  		<td style="text-align:left;">暂未结算保单</td>
				  		<td>{{settleTableData.notSalesmanCount}}</td>
				  		<td>{{settleTableData.notSalesmanTotalCost | numFilter}}</td>
				  		<td>{{settleTableData.notSalesmanActionTotalCost | numFilter}}</td>
				  	</tr>
				  </table>
				  <div>
					  <el-button size='mini' class='wd130' @click='dialogVisible = false'>暂不结算</el-button>
					  <el-button size='mini' type='primary' class='wd130' @click='upsettle()' :loading="isokLoading">正确，马上结算</el-button>
				  </div>
				</el-dialog>
			</div>
			<layer :isShow='isshow' :title="title" :datas="datas" :types="2" :save="tosave" :closeLayer="closeLayer" :quit='closeLayer'></layer>
		</div>
	</div>
</template>
<script>
import Vue from "vue"
import layer from "./../layer/index";
import { getToken, removeToken } from '@/utils/auth'
	export default{
		data(){
			return{
				now:1,
				tableData:[],
				currentPage:1,
				pagetotal:null,
				queryType:0,
				isloading: false,
				daoloading:false,
				// 得到行的id
			    getRowKeys(row) {
		            return row.guaranteeSlipId;
		        },
        		expands: [],// 要展开的行，数值的元素是row的key值
        		expandData:null,
        		dialogVisible:false,
        		settleTableData:{},
        		isshow:false,
        		title:'实结手续费修改',
        		datas:{},
        		pagetotal:0,
        		count:0,
        		salesmanCount:0,
        		notSalesmanCount:0,
        		premium:0,
        		actionPremium:0,
        		btnShow:true,
        		loading:false,
        		dialogShow:false, //导出导入
				fileList:[],
				upurl:process.env.BASE_DOWN+'/api/services/UploadFileLowerSettlements',
				okloading:false,
				expandLoading:false,
				dialogLoading:false,
				isokLoading:false,
				deData:[]
			}
		},
		components:{
			layer
		},
		computed:{
	        headers(){
			    return {
			        'Authorization':'Bearer ' + getToken()
			      }
			    }
	    },
		mounted(){
			if(this.$route.query.id){
				this.id = this.$route.query.id;
				this.signBeginDate = this.$route.query.signBeginDate;
				this.signEndDate = this.$route.query.signEndDate;
				this.organizationUnitId = this.$route.query.organizationUnitId;
				this.salesman = this.$route.query.salesman;
				this.staffId = this.$route.query.staffId;
				this.insuranceType = this.$route.query.insuranceType;
				this.insuranceId = this.$route.query.insuranceId;
			}
			// }else{
			// 	this.id = '5e564282-3138-4ee6-9a1b-be58e8c96032'
			// }
			this.getList();
			// this.getDetail();
		},
		filters:{
			numFilter(val) {
		    // 截取当前数据到小数点后两位
		    // let realVal = Number(val).toFixed(2)
		    // num.toFixed(2)获取的是字符串
		    // return Number(realVal)
		    if(val || val == 0){
		    	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    }
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }

			    return (((sign)?'':'-') + val + '.' + cents);
		    }
		  },
		  times(val) {
				return val.split(" ")[0]
			},
		  percentFilter(val) {
		    if(val && val != '-'){
				// console.log(val)
				val = parseFloat(val.substring(0,val.length-1));
				val = val.toFixed(2);
				return val+' %';
		    }else{
				return '-'
			}
		  },
		  lastname(val) { 
		       let  index = val.lastIndexOf('-')
		       if(index !== '-1'){
		         let sli = val.substr(index+1,val.length)
		         return sli
		       }
		    },
		  sixCon(val){
		  	let aa = val;
		  	if(val.length > 6){
		  		aa = val.substr(0,6)+'...';
		  	}
		  	return aa;
		  },
		  TenCon(val){
		  	let aa = val;
		  	if(val.length > 16){
		  		aa = val.substr(0,16);
		  	}
		  	return aa;
		  }
		},
		methods:{
			getMore(val){
				console.log("getMore")
				console.log(val)

				if(val.isShowM){
					Vue.set(val,"isShowM",false)
				}else{
					Vue.set(val,"isShowM",true)
				}
		
	
				
			},
			errorUP() {
		      this.$message.error("上传失败");
		    },
	        // 切换之后操作
	        toggleRowExpansion(row){
	        	if(this.expands[0] != row.guaranteeSlipId){
	        		this.expands = [];
		            this.expands.push(row.guaranteeSlipId);
					console.log(row);
					console.log("rowconsole")
					this.getDetail(row);
					this.getDandetail(row)
					// guaranteeSlipId
	        	}else{
	        		this.expands = [];
	        	}
			},
			getDandetail(val){
				console.log(val)
					console.log('getDandetail')

				let params = {
					id:val.guaranteeSlipId
				}
				this.post(params,'services/app/guaranteeSlip/GuaranteeSlipDetail_Basics').then(rs => {
					if(rs.success){
					
						
						Vue.set(val,"cheMsg", rs.result)
						// this.deData = rs.result
						console.log('cheMsg...............')
						console.log(val.cheMsg)
						// console.log(this.getDandetail)
					}
	        	})
			},
	        // 批量修改dialog
	        openDialog(){
	        	this.dialogShow = true;
	        },
	        // 导出
	        exportSettle(){
	        	if(this.insuranceType){
	        		var iType = this.insuranceType.split(',');
	        		console.log(iType);
	        	}
	        	this.daoloading=true
	        	let params = {
	        		batchId : this.id,
	        		signBeginDate : this.signBeginDate,
	        		signEndDate : this.signEndDate,
	        		organizationUnitName : this.organizationUnitId,
	        		salesman : this.salesman,
	        		insuranceName : this.insuranceId,
	        		staffName : this.staffId,
	        		insuranceType :iType
	        	};
	        	this.post(params,'services/app/settle/ExportLowerSettlement').then(rs => {
	        		if(rs.success){
	        			this.daoloading=false
	        			if(rs.result.filePath){
	        				console.log(rs)
	        				 window.location.href = process.env.BASE_DOWN +rs.result.filePath;
	        			}else{
							this.$notify({
								title: '错误',
								message: rs.result.errorMessage,
								type: 'error'
							});
						}
	        		}else{
	        			this.daoloading=false
						this.$notify.error({
							title: '错误',
							message: rs.error.message
							// message: "导出无效"
						});
					}
	        	})
	        },
	        // 文件操作
	        handleRemove(file, fileList) {
		    //   console.log(file, fileList);
		    //   this.$notify({
		    //        title: '成功',
		    //        message: '删除成功',
		    //        type: 'success'

		    //     });
		    },
		    // 判断
		    beforeAvatarUpload(file) {
		      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
		      const isexcel = testmsg === "xls";
		      const excel = testmsg === "xlsx";
		      if (!isexcel && !excel) {
		        this.$confirm("上传文件暂时只支持xlsx和xls格式", "提示", {
		          confirmButtonText: "确定",
		          cancelButtonText: "取消",
		          type: "error",
		          callback: action => {
		            this.$emit("closeEditUpload");
		          }
		        });
		      }
		      return isexcel || excel;
		    },
	        handleExceed(files, fileList) {
	          this.$message.warning(`当前限制上传1个文件`);
	        },
	        beforeRemove(file, fileList) {
	        //   return this.$confirm(`确定移除 ${ file.name }？`);
	        },
	        handleSuccess(res,file){
	        	console.log(res);
	        	if(res.state == 1){
	        		this.$notify.error({
			           title: '错误',
			           message: res.errorMessage
			        });
	        	}
	        	this.filePath = res.filePath;
	        	//this.getList()
	        	console.log('upload---------------------------');
	        },
	        // 导入确定
	        uploadBtn(){
				const _this = this;
				let file = _this.filePath;
				if(!file){
					this.$notify.error({
			           title: '错误',
			           message: '请上传正确文件'
			        });
				}else{
				this.okloading = true;
	        	let params = {
	        		batchId : this.id,
	        		filePath : this.filePath  
	        	};
	        	console.log(params);
	        	this.post(params,'services/app/settle/ImportLowerSettlement').then(rs => {
					this.okloading = false;
	        		if(rs.success){
	        			if(rs.result.state == 1){
			        		this.$notify.error({
					           title: '错误',
					           message: rs.result.errorMessage
					        });
			        	}
			        	if(rs.result.state == 0){
			        		_this.dialogShow = false;
			        		_this.getList();
			        		_this.fileList=[];
			        	}
	        		}else{
						this.$notify.error({
							title: '错误',
							message: rs.error.message
						});
					}
				})
				}
	        },
			// 设置表头
			fee(){
				return (
					<div class='setC'>
							<p>车船税 / 含税保费</p>
							<p>不含税保费</p>
					</div>
					)
			},
			// tab切换
			changeTab(val){
				this.now = val;
				this.currentPage = 1;
				if(val == 1){
					this.queryType = 0;
				}else if(val == 2){
					this.queryType = 1;
				}else if(val == 3){
					this.queryType = 2;
				}
				this.getList();
			},
			// 开关切换
			switchtoggle(val){
				console.log(val);
				const _this = this;
				if(this.tableData.length == 1 && this.currentPage != 1){
					this.currentPage = this.currentPage - 1;
				}
				let params = {
					batchId : _this.id,
					id:val
				};
				this.post(params,'services/app/settle/UpdateLowerSettlementState').then(rs => {
					if(rs.success){
						console.log(rs.result);
						this.getList(this.currentPage);
					}
				})
			},
			// 表格信息
			getList(pageindex){
				const _this = this;
				_this.loading = true;
				let params = {};
				if(pageindex){
					params = {
						pageIndex : pageindex,
						batchId:_this.id,
						queryType : _this.queryType
					}
				}else{
					params = {
						batchId:_this.id,
						queryType : _this.queryType
					}
				}
				console.log('====================');
				console.log(params);
				this.post(params,'services/app/settle/LowerSettlementList').then(rs => {
					if(rs.success){
						_this.loading = false;
						console.log(rs);
						if(rs.result.count == 0){
							this.btnShow = false;
						}else{
							this.btnShow = true;
						}
						this.tableData = rs.result.items;
						this.pagetotal= rs.result.totalCount;
						this.count= rs.result.count;
						this.salesmanCount = rs.result.salesmanCount  ;//结算
						this.notSalesmanCount = rs.result.notSalesmanCount  ; //暂不
						this.premium = rs.result.premium  ; //保费
						this.actionPremium = rs.result.actionPremium ; //实结保费
						this.expands = [];
					}
				})
			},
			// 信息详情
			getDetail(val){
				console.log(val)
				let params = {
					guaranteeSlipId  : val.guaranteeSlipId,
					// guaranteeSlipId :'352da0c4-fb42-4803-a327-2de31372ca70',
					batchId:this.id
				}
				//this.expandLoading = true;
				// console.log(params);
				this.post(params,'services/app/settle/LowerSettlementDetail').then(rs => {
					//this.expandLoading = false;
					if(rs.success){
						console.log(rs);
						rs.result.tabShow = true
						rs.result.showMsg = true
						//val.expandData = rs.result;
						Vue.set(val,"expandData",rs.result)
						console.log(this.expandData)
						console.log('-----------------------------------expandData');
						// console.log(this.expandData);
					}else{
						this.$notify.error({
							title: '错误',
							message: rs.error.message,
							customClass:"el-notification-error"
						});
					}
				})
			},
			// 编辑
			toEdit(obj){
				// console.log(id);
				this.isshow = true;
				this.datas = {
					id:obj.guaranteeSlipId ,
					cid:obj.id,
					batchId:obj.batchId
				}
				// console.log(this.datas);
			},
			// 保存
			tosave(data){
				// console.log(data);
				// console.log('**********************************');
				const _this = this;
				_this.isshow = false;
				let params = {
					batchId :_this.id,
					id: data.cid,
					guaranteeSlipId : data.guaranteeSliId ,
					aPoundageRatio : data.aPoundageRatio/100,	
					aPoundage : data.aPoundage ,
					aVehicleAndVesselTaxRatio: data.aVehicleAndVesselTaxRatio/100,
					aVehicleAndVesselTax : data.aVehicleAndVesselTax ,
					aAdditionalRewardRatio : data.aAdditionalRewardRatio/100,
					aAdditionalReward : data.aAdditionalReward ,
					aRemark : data.aRemark
				}
				this.post(params,'services/app/settle/UpdateLowerSettlementDetail').then(rs => {
					if(rs.success){
						if(rs.result.state == 0){
							this.$notify({
					          title: '成功',
					          type: 'success',
					          message:'编辑成功',
					          customClass:"el-notification-success"
					        });
					        _this.getList(_this.currentPage);
						}else{
							this.$notify.error({
					          title: '错误',
					          message: rs.result.errorMessage,
					          customClass:"el-notification-error"
					        });
						}
					}
				})
			},
			closeLayer(){
		      this.isshow = false
		    },
			//页码
		    handleCurrentChange(val){
		    	 console.log(`每页 ${val} 条`);
		    	 this.currentPage = val;
		    	 this.getList(val)
		    },
		    // 政策批次
		    toD(id){
		    	let routeData = this.$router.resolve({
		    		name:'policylower3',
		    		query:{
						batchId:id
		    		}
				})
				window.open(routeData.href, '_blank');
		    },
		    toA(id){
		    	let routeData = this.$router.resolve({
		    		name:'policylower3',
		    		query:{
						batchId:id
		    		}
				})
				window.open(routeData.href, '_blank');
		    },
		    toR(bid,pid){
		    	let routeData = this.$router.resolve({
		    		name:'down_policydowninfo',
		    		query:{
						batchId:bid,
						policyId:pid,
						stream:2,
						filterType:1,
						status:2
		    		}
				})
				window.open(routeData.href, '_blank');
		    },
		    toG(id){
		    	let routeData = this.$router.resolve({
		    		name:'policydetail',
		    		params:{
		    			id:id
		    		}
				})
				window.open(routeData.href, '_blank');
		    },
		     // 上一步
		    toupstep(){
		    	const _this = this;
		    	this.$confirm('返回上一步，该页面的操作将会重置，确定要返回上一步？').then(() => {
		            _this.$router.push({
		            	name:'financedown'
		            })
		        })
		    },
		    // 结算信息
		    tosettle(){
				const _this = this;
		    	this.dialogVisible = true;
				this.dialogLoading = true;
		    	let params = {
		    		id :this.id
		    	}
		    	this.post(params,'services/app/settle/GetLowerGuaranteeSlipTempStat').then(rs =>{
					this.dialogLoading = false;
		    		if(rs.success){
		    			_this.settleTableData = rs.result;
		    		}
		    	})
		    },
		    // 结算
		    upsettle(){
				this.isokLoading = true;
		    	let params = {
		    		batchId :this.id
		    	}
		    	this.post(params,'services/app/settle/LowerSettlement').then(rs =>{
					this.isokLoading = false;
					this.dialogVisible = false;
		    		if(rs.success){
		    			console.log(rs.result);
				    	this.$router.push({
				    		name:'financedown3',
				    		query:{
				    			id:this.id
				    		}
				    	})
		    		}else{
		    			this.$notify.error({
				          title: '错误',
				          message: rs.error.message,
				          customClass:"el-notification-error"
				        });
		    		}
		    	})
		    }
		}
	}
</script>
<style lang='scss' scoped>
// 导出导入
.upload1{
	width:300px;
	height: 90px;
	margin:6px 0 6px 60px;
}
.fi{
	width: 95px !important;
}
.el-upload__tip{
	margin-top:0;
}
.uploadBox{
	margin-left: 40px;
	font-size:13px;
}
.upSapn1{
	display:inline-block;
	margin-left:60px;
	color:#999;
	font-size: 12px;
}
.box4{
	text-align:center;
	margin-top:20px;
}
.upBtn{
	width: 100px;
}

.setFont{
	font-size:16px;
}
.setWd{
	width:76%;
	display:inline-block;
}
.lineS:hover{
	color:#027DCA !important;
	cursor:pointer;
	border-bottom:1px solid #027DCA;
}
.noDou:first-child{
	display:none;
}
.lineG{
	color:#027DCA !important;
	cursor:pointer;
}
.setText{
	border-radius:5px;
	border-color:  #D9D9D9;
	height:60px;
	width:233px;
	padding:5px;
}
 textarea[class='setText']::-webkit-input-placeholder {
    color: #CBCBCB;
    font-size:13px;
}
.setR{
	color:#CF1322;
}
.wd100{
	width:100px;
}
.wd130{
	width:130px;
}
.setC{
	font-size:12px;
	padding:0;
	p{
		padding:0;
		margin:0;
		line-height:18px;
		text-align:right;
	}
}
	.app-container{
		.downStream2{
			width:100%;
			.down-lot{
				text-align:right;
				padding:0 20px;
			}
			.down-top{
				margin-top: 55px;padding: 0 20px;margin-bottom: 50px;
			}
			.down-list{
				width:100%;
				.list-tab{
					padding:0 20px;
					box-border:border;
					border-bottom: 1px solid #CBCBCB;
					.tab{
						display: inline-block;
						padding:0 10px;
						line-height:40px;
						text-align: center;
						color:#333;
						cursor:pointer;
						margin-bottom: -1px;
						span{
							color:#999;
						}
					}
					.now{
						color:#FF7819 !important;
						background: url(../../../assets/images/bomactive2x.png) center 32px no-repeat;
						span{
							color:#FF7819 !important;
						}
					}
				}
			    .list-all{
					padding:14px 20px;
					.all-search{
						display:inline-block;
					}
					.all-data{
						float:right;
						color:#666666;
						display:inline-block;
						span{
							font-size:13px;
							.data-red{
								color:#CF1322;
							}
						}
					}
				}
				.list-all2{
					height:56px;
					box-sizing:border-box;
					padding:14px 20px;
					.all-data2{
						float:right;
						color:#666666;
						display:inline-block;
						line-height:28px;
						span{
							font-size:13px;
							.data-red{
								color:#CF1322;
							}
						}
					}
				}
				.list-table{
					padding:0 20px;
					.item-content{
						span{font-size:13px;}
					}
					.lf,.md{
						width:35%;
						float:left;
						padding-right:2%;
						.title1{
							color:#40819E;
							font-size:14px;
							line-height:20px;
							margin:14px 0;
						}
						p{
							margin:10px 0;
							.firstSpan{
								display:inline-block;
								width:67px;
								color:#999999;
								font-size:13px;
								line-height: 18px;
							}
							span{
								color:#151515;
								font-size:13px;
								line-height: 18px;
							}
						}
						.divP{
							margin:10px 0;
							.firstSpan{
								display:inline-block;
								width:67px;
								color:#999999;
								font-size:13px;
							    line-height: 18px;
    							vertical-align: top;
							}
							span{
								color:#151515;
								font-size:13px;
								line-height: 18px;
							}
						}
					}
					.md{
						padding-left:4%;
						padding-right:4%;
						width:33%;
						border-right:1px solid #CBCBCB;
						border-left:1px solid #CBCBCB;
						p{
							.firstSpan{
								display:inline-block;
								width:110px;
								color:#999999;
								font-size:13px;
							}
						}
					}
					
					.rh{
						margin-left:4%;
						width:27%;
						float:left;
                        .changpai{
                                text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 100px;
                            display: inline-block;
                            vertical-align: TOP;
                        }
						.title1{
							color:#40819E;
							font-size:14px;
							line-height:20px;
							margin:14px 0;
						}
						p{
							margin:10px 0;
							line-height: 18px;
							span:first-child{
								display:inline-block;
								width:110px;
								color:#999999;
								font-size:13px;
							}
							span{
								font-size:13px !important;
								color:#151515;
							}
						}
					}
					// .rh2{
					// 	p{
					// 		margin:10px 0;
					// 		line-height: 18px;
					// 		span:first-child{
					// 			display:inline-block;
					// 			width:95px;
					// 			color:#999999;
					// 			font-size:13px;
					// 		}
					// 		span{
					// 			font-size:13px !important;
					// 			color:#151515;
					// 		}
					// 	}
					// }
					.edspan1{
						display:inline-block;
						width:25px;
						height:25px;
						background:#39B96C;
						border-radius:6px;
						color:#fff;
						font-size:14px;
						text-align:center;
					}
					.edspan2{
						display:inline-block;
						width:25px;
						height:25px;
						background:#3C8CBD;
						border-radius:6px;
						color:#fff;
						font-size:14px;
						text-align:center;
					}
					.info-p1{
						font-size:13px;
						color:#333;
						line-height:18px;
						margin:0 0 3px 0;
						span:first-child{
							display: inline-block;
							text-overflow: ellipsis;
							overflow: hidden;
							width: 86%;
							max-width: 180px;
							white-space: nowrap;
						}
					}
					.info-p2{
						font-size:13px;
						color:#666;
						margin:3px 0 0 0;
						line-height:18px;
						display:inline-block;
						span:first-child{
							display:inline-block;
							min-width:100px;
						}
					}
					.info-p3{
						font-size:13px;
						color:#666;
						margin:3px 0 0 0;
						line-height:18px;
					}
					a{
						color:#027DCA
					}
				}
				.list-page{
					margin:55px 0 20px 0;
					text-align:right;
					padding:0 20px;
				}
			}
			.down-btn{
				text-align:center;
				margin-bottom:50px;
			}
			.settletable{
				border:1px solid #efefef;
				text-align:right;
				width:100%;
				margin-bottom:20px;
				.setB{
					font-weight:700;
				}
				td{
					border:1px solid #efefef;
				}
			}
		}
	}
</style>